<template>
  <div class="image-upload">

    <el-upload
      class="avatar-uploader"
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :file-list="fileList"
      :show-file-list="false"
      :on-success="handleAvatarSuccess">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <span v-else >上传图片</span>
    </el-upload>

  </div>
</template>

<script>
export default {

  props: {
    imageUrl: {
      type: String,
      default: ''
    },

    fileList: {
      type: Array
    }
  },

  data () {
    return {
      // imageUrl: ''
    }
  },
  methods: {
    handleAvatarSuccess (res, file) {

      this.imageUrl = URL.createObjectURL(file.raw)

      // this.$emit('uploadSuccess', 'https://www.baidu.com/link?url=Q6me25KeQq2iFsxVEzY62CWsAfebKqXIY8N27-w26m9ncSQ09fTxcnrsQUqsllrjDkna-GddgZubPkmL54YIdUi_2ksZbDYV4n3AkYNFYAE0dzUGeIOf6gMboQyswMYDh0R_qkMT9AR65pOtZTeTNlhh01-5ND7LpV_7PcuNgb7y7sos9C832g7KNzfs8c361-mK40V9-_rBRcLpV_YsduzlcNMjrrlvtymzI8CmNVO97OOBLSYxEQQXOAawX0JuCCuwKwmYTb8dZK0a7iJ9-mQC2W2WKacOYEILyZiu4W1XkQpeqFv0SnvGXLxGh3w8Z8Zu2M8PK1azEp57ApsOmE3UQkjNIdT2qbr9pQvA0axHaOSFQhC6aSwyN9j5ZTXnRJ6iocBPMxLXTLUFHcDWjh_Q0mAKlbuDZo3e8_u28AwGCEgA9jPjBwQ0Zl8E4KMb9qNTgZOmDm5mxHBZ7T32Q39H1Zs6swIaMCMuJFxK2Zzps8uEx6qnLV_QgehdvPs_ViCz41LK-fkqEIMcn4C7Iz3cfUo_phjKGa0XhAJtWsnz-Mu4lpHGvy2-l3En1Wpd_37Hz-TtX_pnTxbeDx0KdNXN6Z2MrhulZoH3Bnv5mIKpvqwhmSquF0iJwDR9WGQ6iaCqT0bjMMFPnpSXc2oOSgjlVdcAH51HeW-iEHMjqoTwvNrLIK6Az46B0Ax1OYo-&wd=&eqid=d5ca0d370011e8f20000000362595aa7')
    }
    // beforeAvatarUpload (file) {
    //   const isJPG = file.type === 'image/jpeg'
    //   const isLt2M = file.size / 1024 / 1024 < 2

    //   if (!isJPG) {
    //     this.$message.error('上传头像图片只能是 JPG 格式!')
    //   }
    //   if (!isLt2M) {
    //     this.$message.error('上传头像图片大小不能超过 2MB!')
    //   }
    //   return isJPG && isLt2M
    // }
  }
}
</script>

<style lang="scss" scoped>

.avatar-uploader {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    box-sizing: inherit;

    ::v-deep {
      .el-upload {
         border: 1px dashed #d9d9d9;
         border-radius: 6px;
          cursor: pointer;
          position: relative;
          width: 100px;
          height: 60px;
          line-height: 60px;
      }
    }
}
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  // .avatar-uploader-icon { // 这里设置无用
  //   font-size: 16px;
  //   color: #8c939d;
  //   width: 80px;
  //   height: 60px;
  //   line-height: 60px;
  //   text-align: center;
  // }
  .avatar {
    width: 80px;
    height: 50px;
    display: inline-block;
  }

</style>
